<template>
  <div class="page">
    <div class="logo-title">abcd69</div>
    <div class="ipt-box" v-if="status == 0">
      <div class="ipt-main">
        <div class="ipt-item">
          <div class="code-box">
            <van-field
              class="code-item-input"
              v-model="email"
              placeholder="Enter your email"
            />
            <van-button class="code-button" @click="sendEmail"
              >Get verifcation code
            </van-button>
          </div>
        </div>
        <div class="ipt-item">
          <van-field
            class="ipt-item-input"
            v-model="code"
            placeholder="verifcation code"
          />
        </div>
      </div>
      <div class="confirm-box">
        <van-button class="confirm-btn" @click="handleEmail"
          >Continue</van-button
        >
      </div>

      <div class="login-box">
        <van-button class="confirm-btn" @click="goLogin"
        >Log in</van-button
        >
      </div>
    </div>
    <div class="set-box" v-if="status == 1">
      <div class="set-title">Set a new password</div>
      <div class="ipt-item">
        <van-field
          class="ipt-item-input"
          :type="showPassword ? 'text' : 'password'"
          v-model="password"
          placeholder="Minimum 6 characters required"
        />
      </div>
      <div class="ipt-item">
        <van-field
          class="ipt-item-input"
          v-model="new_password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="Confirm"
        />
      </div>
      <div class="show-psd">
        <van-checkbox
          v-model="showPassword"
          shape="square"
          checked-color="#273458"
          >Show password</van-checkbox
        >
      </div>
      <div class="confirm-box">
        <van-button class="confirm-btn" @click="changePassword"
          >Save password</van-button
        >
      </div>
    </div>
    <div class="info-box" v-if="status == 2">
      <div class="info-main">
        <div class="info-img-box">
          <img
            class="info-img"
            src="../../assets/images/login/success.png"
            alt=""
          />
        </div>
        <div class="info-text">密码设置成功，请前往登录界面</div>
        <van-button class="info-btn" @click="goLogin">confirm</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  apiGetVerificationCode,
  apiForgotEmail,
  apiChangePassword,
} from "../../request/api";
export default {
  name: "forget",
  data() {
    return {
      email: "",
      code: "",
      password: "",
      new_password: "",
      status: 0,
      showPassword: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    goLogin() {
      this.$router.push("/login");
    },
    sendEmail() {
      if (this.email == "") {
        this.$toast.fail("请输入邮箱");
        return;
      }
      apiGetVerificationCode(this.email).then((res) => {
        if (res.code == 200) {
          this.$toast.success(res.msg);
        }
      });
    },
    handleEmail() {
      apiForgotEmail({
        username: this.email,
        code: this.code,
      }).then((res) => {
        if (res.code == 200) {
          this.status = 1;
          console.log(res);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
    changePassword() {
      apiChangePassword({
        username: this.email,
        password: this.password,
        passwordVerify: this.new_password,
      }).then((res) => {
        if (res.code == 200) {
          this.status = 2;
          console.log(res);
        } else {
          this.$toast.fail(res.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.logo-title {
  font-size: 70px;
  font-weight: 800;
  color: #273458;
  margin: 166px auto 0;
  text-align: center;
}
.ipt-item {
  margin-bottom: 40px;
}
.ipt-item-input {
  border: 1px solid #a6a6a6;
  height: 90px;
  align-items: center;
}
:deep(.van-field__control) {
  font-size: 28px;
}
.confirm-box {
  margin-top: 75px;

  .confirm-btn {
    width: 100%;
    height: 90px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
    border: 1px solid #ffffff;
    font-size: 26px;
    color: #ffffff;
    font-weight: 400;
  }
}
.login-box {
  margin-top: 20px;
  .confirm-btn {
    width: 100%;
    height: 90px;
    background: #273458;
    box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
    border: 1px solid #ffffff;
    font-size: 26px;
    color: #ffffff;
    font-weight: 400;
  }
}
.ipt-box {
  padding: 0 56px;
  margin-top: 254px;
  .ipt-main {
    .code-box {
      display: flex;
      align-items: center;
    }
    .code-item-input {
      border: 1px solid #a6a6a6;
      height: 90px;
      align-items: center;
      flex: 1;
    }
    .code-button {
      width: 262px;
      height: 90px;
      background: #273458;
      font-size: 26px;
      font-weight: 400;
      color: #ffffff;
      border: 1px solid #273458;
      box-sizing: border-box;
    }
  }
}
.set-box {
  padding: 0 56px;
  margin-top: 194px;
  .set-title {
    font-size: 28px;
    font-weight: bold;
    color: #273458;
    margin-bottom: 20px;
  }
  .show-psd {
    margin: 20px 0;
  }

  :deep(.van-checkbox__label) {
    font-size: 28px;
    line-height: 36px;
  }
  :deep(.van-checkbox__icon) {
    font-size: 36px;
  }
}
.info-box {
  padding: 0 90px;
  margin-top: 212px;
  .info-main {
    border: 1px solid #a6a6a6;
    padding: 51px 35px 20px;
    .info-img-box {
      width: 78px;
      text-align: center;
      height: 78px;
      background: #21b66d;
      border-radius: 50%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info-img {
      width: 30px;
      height: 21px;
    }
    .info-text {
      margin-top: 60px;
      font-size: 26px;
      font-weight: 400;
      color: #000000;
      text-align: center;
    }
    .info-btn {
      width: 100%;
      height: 73px;
      background: #273458;
      box-shadow: 0px 3px 12px 1px rgba(71, 71, 71, 0.16);
      border: 1px solid #ffffff;
      font-size: 26px;
      color: #ffffff;
      font-weight: 400;
      margin-top: 60px;
    }
  }
}
</style>
